@import '../common.scss';

body{
	width: 100vw;
	height: 100vh;
	background-image: -webkit-linear-gradient(top,black,black,gray);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 60px;
	font-weight:100;
	letter-spacing:20px
}
.out_box{
	background-image: -webkit-linear-gradient(top,white,gray,black);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}


//定义星空背景用shadow来循环生成
@function getShadows($n) {
    $Shadows :'#{random(100)}vw #{random(100)}vh #fff';

    @for $i from 2 to $n {
        $Shadows :'#{$Shadows}, #{random(100)}vw #{random(100)}vh #fff';
    }

    @return unquote($Shadows)
}
$count :800; //星空的数量
@for $i from 1 to 5 {
    $count: floor($count/2);
    .star#{$i} {
        $size:#{$i}px;
        position: fixed;
        width: $size;
        height: $size;
        background-color: rgba(0, 0, 0, 0.032);
        border-radius: 50%;
        top: 0;
        left: 0;
        box-shadow: getShadows($count);
		animation: twinkle 10s linear infinite;
        &::after {
            content: '';
            position: fixed;
            left: 0;
            top: 100vh;
            border-radius: inherit;
            box-shadow: inherit;
            width: $size;
            height: $size;
        }
    }
}
@keyframes twinkle{
  100%{
	  transform: translateY(-200px);
  }
}